<%@ page language="java" contentType="text/html; charset=utf-8"	pageEncoding="utf-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<c:set var="ctx" value="${pageContext.request.contextPath}" />
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>聯繫我們</title>
  <script type='text/javascript' src="${ctx}/extends/jquery-1.7.2.min.js"></script>
  <script type="text/javascript">
	var languageId = "${language}";
    var flag = false;
    $(document).ready(function(e) {	
	   $("#option").val('');
	   $("#option_en").val('');
	   var regex = /^([0-9A-Za-z\-_\.]+)@([0-9a-z]+\.[a-z]{2,3}(\.[a-z]{2})?)$/g;
   	   var regex_phone = /^0*(13|15)\d{9}$/; 
	   var regex_tel = /^\d{3,4}-\d{7,8}(-\d{3,4})?$/;
	   if(languageId == "1") {
	       $("#email_en").blur(function(e) {
			   if(!regex.test( $(this).val() )) {
				   $(this).css("border","#F00 2px solid");
				   $(this).attr("title","E-mail Format Error");
				   flag = false
			   } else {
				   $(this).css("border","none");
				   flag = true;
			   }
	  	   });
		   $("#tel_en").blur(function(e) {
			   if(!regex_phone.test($(this).val()) && !regex_tel.test($(this).val())) {
				   $(this).css("border","#F00 2px solid");
				   $(this).attr("title","Tel/Mobile phone Format Error;(correct:020-8888888)");
				   flag = false;
			   } else {
				    $(this).css("border","none");
					flag = true;
			   }
	       });		   
	   } else {
	       $("#email").blur(function(e) {
			   if(!regex.test( $(this).val() )) {
				   $(this).css("border","#F00 2px solid");
				   $(this).attr("title","E-mail Format Error");
				   flag = false
			   } else {
				   $(this).css("border","none");
				   flag = true;
			   }
	  	   });
		   $("#tel").blur(function(e) {
			   if(!regex_phone.test($(this).val()) && !regex_tel.test($(this).val())) {
				   $(this).css("border","#F00 2px solid");
				   $(this).attr("title","Tel/Mobile phone Format Error;(correct:020-8888888)");
				   flag = false;
			   } else {
				    $(this).css("border","none");
					flag = true;
			   }
	       });		   
	   }
	   	   
    });
	
	function invalidate() {
		var content = "";
		if(languageId == "2") {
			content = "姓名：" + $("#user").val() + "\n公司：" + $("#cpy").val() + "\nE-mail：" + $("#email").val()
				+ "\n電話：" + $("#tel").val() + "\n傳真：" + $("#fax").val() + "\n地址：" + $("#address").val() 
				+ "\n其他要求/意見：" + $("#option").val();
			$("#emailContent").val(content);
		} else {
			content = "UserName：" + $("#user_en").val() + "\nCompany：" + $("#cpy_en").val() + "\nE-mail：" + $("#email_en").val()
				+ "\nTel：" + $("#tel_en").val() + "\nFax：" + $("#fax_en").val() + "\nAddress：" + $("#address_en").val() 
				+ "\nOption：" + $("#option_en").val();
			$("#emailContent_en").val(content);
		}
		if(!flag) {
			$("#user").focus();
		}
		return flag;
	}
  </script>
  <style type="text/css">
    html {
		height:100%;
	}
    body {
		background:url(${ctx}/pages/web/res/bg.png) center repeat-y;
		font-family:"宋体";
		text-align:center;
		margin:0;
		padding:0;
		border:0 none;
		color:#666666;
		font-family:"宋体";
		font-size:14px;
	}
	div#container {
		margin:0 auto;
		border:0 none;
		padding:0;
		text-align:center;
		width:1024px;
	}
	div#content {
		background:url(${ctx}/pages/web/res/contact2.png) top center no-repeat;
		margin:0
		padding-top:0;
		border:none;
		min-height:500px;
		text-align:left;
	}
	div#navigator {
		background:url(${ctx}/pages/web/res/navigator.png) center no-repeat;
		width:1024px;
		height:115px;
	}
	div#navigator ul {
		float:left;
		margin-left:350px;
		margin-top:-37px;
	}
	div#navigator ul li {
		float:left;
		text-align:center;
		list-style-type:none;
		margin:0;
		width:100px;
		border-left:#177b95 1px dotted;
	}
	div#navigator ul li a{
		text-decoration:none;
		color:#666666;
	}
	div#navigator ul li a:hover{
		text-decoration:none;
		color:#177b95;
	}	
	div#footer {
		position:relative;
		background:url(${ctx}/pages/web/res/foot.png) center no-repeat;
		color:#666666;
		text-align:center;
		font-family:Arial, Helvetica, sans-serif;
		font-size:12px;
		width:1024px;
		height:85px;
	}	
	.pr {
		background:url(${ctx}/pages/web/res/contact3.png) left no-repeat; 
		padding-left:15px; 
		line-height:35px;
	}
	.txt {
		border:none; 
		width:250px; 
		font-size:14px; 
		color:#666666;
		line-height:22px;
		background-color:transparent;
	}
	a {
		text-decoration:none;
		color:#15647a;
	}
	.dsp {display:none;}
  </style>  
</head>

<body>
  <div id="container">
    <div id="navigator">
      <div style="margin-left:115px; width:155px; height:85px; cursor:pointer;"></div>    
      <ul>
        <li>
          <c:choose>
            <c:when test="${language eq 2}">
              <a href="${ctx}/pages/web/news/newsList.jsp?language=${language}">新聞動態</a>
            </c:when>
            <c:otherwise>
			  <a href="${ctx}/pages/web/news/newsList.jsp?language=${language}">d-News</a>
            </c:otherwise>
          </c:choose>        
        </li>
        <li>
          <c:choose>
            <c:when test="${language eq 2}">
              <a href="${ctx}/pages/web/product/product.jsp?categoryType=1&language=${language}">產品服務</a>
            </c:when>
            <c:otherwise>
			  <a href="${ctx}/pages/web/product/product.jsp?categoryType=1&language=${language}">d-Concept</a>
            </c:otherwise>
          </c:choose>          
        </li>
        <li>
          <c:choose>
            <c:when test="${language eq 2}">
              <a href="${ctx}/pages/web/case/case.jsp?language=${language}">作品集</a>
            </c:when>
            <c:otherwise>
			  <a href="${ctx}/pages/web/case/case.jsp?language=${language}">Gallery</a>
            </c:otherwise>
          </c:choose>           
        </li>
        <li>
          <c:choose>
            <c:when test="${language eq 2}">
              <a href="${ctx}/company/web/getAboutUs.do?languageId=${language}&flag=1">關於我們</a>
            </c:when>
            <c:otherwise>
			  <a href="${ctx}/company/web/getAboutUs.do?languageId=${language}&flag=1">d-Magic</a>
            </c:otherwise>
          </c:choose>          
        </li>
        <li style="border-right:#177b95 1px dotted;">
          <c:choose>
            <c:when test="${language eq 2}">
              <a id="nav_contact" href="${ctx}/company/web/getAboutUs.do?languageId=${language}&flag=0">聯繫我們</a>
            </c:when>
            <c:otherwise>
			  <a id="nav_contact" href="${ctx}/company/web/getAboutUs.do?languageId=${language}&flag=0">Contact us</a>
            </c:otherwise>
          </c:choose>           
        </li>
      </ul>
    </div>
  
    <div id="top" style="padding-top:35px; height:100px;">
      <div style="background:url(${ctx}/pages/web/res/contact1.png) bottom center no-repeat; height:45px; color:#15647a; font-size:28.5px;">
        諮詢表格
      </div>
      <p>
       <c:choose>
         <c:when test="${language eq 1}">
           If you want to contact us, or get the latest news and information, please fill in your details:
         </c:when>
         <c:otherwise>
                               如果您想與我們聯繫，並跟上最新的新聞和信息服務，請填寫您的詳細資料:
         </c:otherwise>
       </c:choose>       
      </p>
    </div>
    <div id="content">
      <div id="left" style="float:left; width:515px; background:url(${ctx}/pages/web/res/contact5.png) right no-repeat;">
        <p style="color:#15647a; margin-left:80px;">我想有更多的資料：</p> 
        <p>
        <div id="cn" style="margin-left:80px;" class="<c:if test="${language eq 1}">dsp</c:if>" >         
          <form action="${ctx}/inquire/save.do" method="post" onSubmit="return invalidate()">
            <p class="pr">
              <label>名 字 ：</label>
              <input id="user" type="text" name="inquire.consultant" class="txt"/>             
            </p>
            <p class="pr">
              <label>公 司 ：</label>
              <input id="cpy" type="text" name="inquire.consultantCompany" class="txt"/>             
            </p>
            <p class="pr">
              <label>E-Mainl ：</label>
              <input id="email" type="text" name="inquire.consultantEmail" class="txt"/>             
            </p>
            <p class="pr">
              <label>電 話 ：</label>
              <input id="tel" type="text" name="inquire.consultantTel" class="txt"/>             
            </p>
            <p class="pr">
              <label>傳 真 ：</label>
              <input id="fax" type="text" name="inquire.consultantFax" class="txt"/>             
            </p>      
            <p class="pr">
              <label>地 址 ：</label>
              <input id="address" type="text" name="inquire.consultantAddress" class="txt"/>             
            </p> 
            <p style="padding-left:15px; background:url(${ctx}/pages/web/res/contact6.png) left no-repeat; line-height:35px; height:128px;">
              <label>其他要求/意見 ：</label><br />
              <textarea id="option" rows="4" name="inquire.opinion" style="font-size:14px; color:#666666; text-align:left;
              									overflow-y:auto; border:none; background-color:transparent; width:320px;">
              </textarea>  
            </p>  
            <input type="hidden" name="language"  value="${language}"/>          
            <textarea id="emailContent" name="emailContent" style="display:none;"></textarea>                                
            <p><input type="submit" value="submit"/></p>                                                                                        
          </form>
        </div>

        <div id="en" style="margin-left:80px;" class="<c:if test="${language eq 2}">dsp</c:if>">
          <form action="${ctx}/inquire/save.do" method="post" onSubmit="return invalidate()">
            <p class="pr">
              <label>User：</label>
              <input id="user_en" type="text" name="inquire.consultant" class="txt"/>             
            </p>
            <p class="pr">
              <label>Company：</label>
              <input id="cpy_en" type="text" name="inquire.consultantCompany" class="txt"/>             
            </p>
            <p class="pr">
              <label>E-Mainl ：</label>
              <input id="email_en" type="text" name="inquire.consultantEmail" class="txt"/>             
            </p>
            <p class="pr">
              <label>Tel ：</label>
              <input id="tel_en" type="text" name="inquire.consultantTel" class="txt"/>             
            </p>
            <p class="pr">
              <label>Fax ：</label>
              <input id="fax_en" type="text" name="inquire.consultantFax" class="txt"/>             
            </p>      
            <p class="pr">
              <label>Address ：</label>
              <input id="address_en" type="text" name="inquire.consultantAddress" class="txt"/>             
            </p> 
            <p style="padding-left:15px; background:url(${ctx}/pages/web/res/contact6.png) left no-repeat; line-height:35px; height:128px;">
              <label>Options ：</label><br />
              <textarea id="option_en" rows="4" name="inquire.opinion" style="font-size:14px; color:#666666; text-align:left;
              									overflow-y:auto; border:none; background-color:transparent; width:320px;">
              </textarea>  
            </p>  
            <input type="hidden" name="language"  value="${language}"/>             
            <textarea id="emailContent_en" name="emailContent" style="display:none;"></textarea>                                
            <p><input type="submit" value="submit"/></p>                                                                                        
          </form>
        </div>        
        </p>
      </div>
      
      <div id="company" style="float:left; margin-left:35px;">
       <c:forEach items="${company_contact}" var="cpy">
        <div id="companyInfo" style="margin-top:50px;">
          <p id="companyName">${cpy.companyName}</p>
          <p style="padding-top:15px;">
            <label>公司地址：</label>
            <span id="companyAddr">${cpy.companyAddress}</span>
          </p>
          <p>
            <label>電 話&nbsp;&nbsp;&nbsp;：</label>
            <span id="companyTel">${cpy.companyTel}</span>
          </p>
          <p>
            <label>傳 真&nbsp;&nbsp;&nbsp;：</label>
            <span id="companyFax">${cpy.companyFax}</span>
          </p>
          <p>
            <label>電 郵&nbsp;&nbsp;&nbsp;：</label>
            <span id="companyMail" style="color:#15647a;">
              <a href="mailto:${cpy.companyEmail}?subject=D-Magic">${cpy.companyEmail}</a>
            </span>
          </p>
          <p>
            <label>公司網頁：</label>
            <span id="companyUrl" style="color:#15647a;">
              <a href="${cpy.companyUrl}" target="new" title="${cpy.companyUrl}">${cpy.companyUrl}</a>
            </span>
          </p>
        </div> 
       </c:forEach>            
      </div>  
      <div style="clear:both;"></div>    
    </div>
    <div id="footer">
      <p style="padding-top:45px">copyright(c)2013 d-magic co.,ltd.   All right reserved.design b</p>
    </div>
  </div>
</body>
<script type="text/javascript">
    $("#nav_contact").css("color","#177b95");
	$("#navigator div").click(function(e) {
        window.location = "${ctx}/pages/web/index.jsp";
    });  
</script>
</html>
